[CSS]Webアプリのスクロールバーを非表示にする

こんにちは、CX事業本部 IoT事業部の若槻です。

現在開発しているWebアプリで、画面スクロール操作を行うユースケースがないため、スクロールバーを非表示としたいという要望がありました。

今回は、CSSでWebアプリのスクロールバーを非表示にする（スクロール中含む）方法を確認してみました。

確認パターン

CSSの設定は次のパターンを確認してみます。

• 設定なし
• scrollbar-width
• -ms-overflow-style
• ::-webkit-scrollbar

OSおよびブラウザは次のパターンで確認をします。

OS	ブラウザ	バージョン
Mac	Google Chrome	93.0.4577.82（Official Build）（x86_64）
同上	Safari	14.0.1 (15610.2.11.51.10, 15610)
同上	Firefox	92.0.1 (64 ビット)
Windows 10	Google Chrome	94.0.4606.61（Official Build）（x86_64）
同上	Microsoft Edge	94.0.992.31(公式ビルド)(64ビット)
同上	Firefox	92.0.1 (64 ビット)

確認してみた

設定なし

設定なしの場合は全てのパターンでスクロールバーが表示されます。

OS	ブラウザ	非表示
Mac	Chrome	×
同上	Safari	×
同上	Firefox	×
Windows	Chrome	×
同上	Edge	×
同上	Firefox	×

scrollbar-width

CSSファイルにscrollbar-width: noneを追加します。

body {
  font-family: sans-serif;
  scrollbar-width: none;
}

全てのパターンでスクロールバーを非表示とできませんでした。

OS	ブラウザ	非表示
Mac	Chrome	×
同上	Safari	×
同上	Firefox	×
Windows	Chrome	×
同上	Edge	×
同上	Firefox	×

scrollbar-widthを使えば以前まではFirefoxのスクロールバーを非表示にする（幅をゼロとする）ことができるという情報がありましたが、現在はできないようです。

The scrollbar-width property allows the author to set the maximum thickness of an element’s scrollbars when they are shown.
Firefox 64

• scrollbar-width - CSS: カスケーディングスタイルシート | MDN

-ms-overflow-style

CSSファイルにscrollbar-width: noneを追加します。

body {
  font-family: sans-serif;
  -ms-overflow-style: none;
}

全てのパターンでスクロールバーを非表示とできませんでした。

OS	ブラウザ	非表示
Mac	Chrome	×
同上	Safari	×
同上	Firefox	×
Windows	Chrome	×
同上	Edge	×
同上	Firefox	×

-ms-overflow-styleについても、使用すれば以前まではEdgeやIEのスクロールバーを非表示とできたようですが、現在はできないようです。MDNのページも消えていました。

Specify whether content is clipped when it overflows the element's content area.
Edge, IE 10

::-webkit-scrollbar

CSSファイルに::-webkit-scrollbarを使用した記述を追加します。

body {
  font-family: sans-serif;
}

body::-webkit-scrollbar {
  display: none;
}

Firefox以外のパターンでスクロールバーを非表示とできました。

OS	ブラウザ	非表示
Mac	Chrome	○
同上	Safari	○
同上	Firefox	×
Windows	Chrome	○
同上	Edge	○
同上	Firefox	×

::-webkit-scrollbarは有用でしたが、非標準であるため将来変更される可能性があり、本番環境などで使用しない方が良いとのことです。

• ::-webkit-scrollbar - CSS: Cascading Style Sheets | MDN

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

まとめ

CSSを次のように設定すれば、Google Chrome、Microsoft Edge、Safariでスクロールバーを非表示とすることができました。将来的に使用できなくなる可能性はありますが、現状の選択肢はこれのようです。

body {
  font-family: sans-serif;
}

body::-webkit-scrollbar {
  display: none;
}

スクロールバーを非表示としたいという要件は少なからずありそうですが、オープンウェブの仕様実装としては積極的でないように思えました。その理由としては、スクロールバーを非表示とすることがウェブアクセシビリティの観点から推奨はされていないということがありそうです。よって特段の事情が無い限りスクロールバーは表示する実装で良いかと思います。

参考

• [CSS] スクロールバーを非表示にする（IE, Edge, Chrome, Safari, Firefoxに対応） - YoheiM .NET

以上